uni-button[plain] {
	border-color: currentColor;
}

uni-button:after {
	border-radius: inherit;
}

.x-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	vertical-align: middle;
	-webkit-appearance: none;
	-webkit-text-size-adjust: 100%;
	height: $button-default-height;
	height: var(--button-default-height, $button-default-height);
	font-size: $button-default-font-size;
	transition: opacity $animation-duration-fast;
	border-radius: var(--button-border-radius, $button-border-radius);
	padding: 0 32rpx;
	font-size: $button-normal-font-size;

	&::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		border: inherit;
		border-radius: inherit; /* inherit parent's border radius */
		transform: translate(-50%, -50%);
		opacity: 0;
		content: ' ';
		background-color: $black;
		border-color: $black;
	}

	&::after {
		border-width: 0;
	}

	&:active::before {
		opacity: 0.15;
	}

	&--default {
		color: $button-default-color;
		background-color: $button-default-background-color;
		border: 1px solid $button-default-border-color;
	}

	&--primary {
		color: $button-primary-color;
		background-color: var(--button-primary-background-color, $button-primary-background-color);
		border: 1px solid var(--button-primary-background-color, $button-primary-background-color);
	}

	&--info {
		color: $button-info-color;
		background-color: $button-info-background-color;
		border: 1px solid $button-info-border-color;
	}

	&--danger {
		color: $button-danger-color;
		background-color: $button-danger-background-color;
		border: 1px solid $button-danger-border-color;
	}

	&--warning {
		color: $button-warning-color;
		background-color: $button-warning-background-color;
		border: 1px solid $button-warning-border-color;
	}

	&--plain {
		background-color: $button-plain-background-color;

		&.x-button--primary {
			color: var(--button-primary-background-color, $button-primary-background-color);
		}

		&.x-button--info {
			color: $button-info-background-color;
		}

		&.x-button--danger {
			color: $button-danger-background-color;
		}

		&.x-button--warning {
			color: $button-warning-background-color;
		}
	}

	&--large {
		width: 100%;
		height: $button-large-height;
		font-size: $button-default-font-size;
	}

	&--small {
		min-width: $button-small-min-width;
		height: $button-small-height;
		padding: 0 $padding-xs;
		font-size: $button-small-font-size;
	}

	&--mini {
		min-width: $button-mini-min-width;
		height: $button-mini-height;
		font-size: $button-mini-font-size;
		padding-left: 8rpx;
		padding-right: 8rpx;
	}

	&--block {
		display: flex;
		width: 100%;
	}

	&--round {
		border-radius: $button-round-border-radius;
	}

	&--square {
		border-radius: 0;
	}

	&--disabled {
		opacity: $button-disabled-opacity;
		&.x-button {
			&--primary {
				color: $button-primary-color !important;
				background-color: $button-primary-background-color !important;
			}
			&--info {
				color: $button-info-color !important;
				background-color: $button-info-background-color !important;
			}
			&--danger {
				color: $button-danger-color !important;
				background-color: $button-danger-background-color !important;
			}
			&--warning {
				color: $button-warning-color !important;
				background-color: $button-warning-background-color !important;
			}
			&--plain {
				background-color: $button-plain-background-color !important;

				&.x-button--primary {
					color: $button-primary-background-color !important;
				}

				&.x-button--info {
					color: $button-info-background-color !important;
				}

				&.x-button--danger {
					color: $button-danger-background-color !important;
				}

				&.x-button--warning {
					color: $button-warning-background-color !important;
				}
			}
		}
	}

	&__icon {
		min-width: 1em;
		font-size: 1.2em;
		line-height: inherit;
		vertical-align: top;
	}

	&__icon + &__text,
	&__loading + &__text {
		display: inline-block;
		margin-left: 5px;
		vertical-align: top;
	}

	&--hairline {
		// padding-top: 1px; // add 1px padding for text vertical align middle
		border-width: 0;

		&::after {
			border-color: inherit;
			border-width: 1px;
			border-radius: $button-border-radius * 2;
		}

		&.x-button--round::after {
			border-radius: $button-round-border-radius;
		}

		&.x-button--square::after {
			border-radius: 0;
		}
	}
}
